<%--
  Created by IntelliJ IDEA.
  User: You
  Date: 2020/5/17
  Time: 10:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" import="java.util.*,com.xingyun.info_manager.entity.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>患者信息登记系统</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/global.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/icheck/minimal/red.css">

</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <%--<div class="layui-header">--%>
        <%--<!-- 引入公共头区域 -->--%>
        <%--<%@include file="../commen/head.jsp" %>--%>
    <%--</div>--%>

    <%--<div class="layui-side layui-bg-black">--%>
        <%--<div class="layui-side-scroll">--%>
            <%--<!-- 引入左侧导航区域（可配合layui已有的垂直导航） -->--%>
            <%--<%@include file="../commen/menu.jsp" %>--%>
        <%--</div>--%>
    <%--</div>--%>

    <%--<div class="layui-body">--%>
        <!-- 内容主体区域 -->
        <%--<div style="padding: 15px;">--%>
            <%--<fieldset class="layui-elem-field">--%>
                <%--<legend>用户管理 - 用户列表</legend>--%>
        <div class="layui-field-box">
            <form id="queryForm" class="layui-form" action="${pageContext.request.contextPath}/admin/findall">
                <input type="hidden" name="currPage" id="currPage" />
                <input type="hidden" name="pageSize" id="pageSize" />
                <div class="layui-form-item" >
                    <label class="layui-form-label" style="width: 50px;text-align: left;">用户名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="userName"  placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                    <label class="layui-form-label" style="width: 50px;text-align: left;">姓名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="realName"  placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                    <label class="layui-form-label" style="width: 50px;text-align: left;">手机号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="userMobile"  placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-inline" style="text-align:left;">
                        <div class="layui-input-inline">
                            <button id="queryBtn" type="button" class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe615;</i>查询</button>
                        </div>
                    </div>
                </div>
            </form>
            <hr>
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm layui-btn-normal dw-dailog" dw-url="${pageContext.request.contextPath}/pages/admin/admin_add.jsp" dw-title="新增用户" dw-width="900px" dw-height="400px">
                    <i class="layui-icon">&#xe654;</i>新增
                </button>
                <%--<button class="layui-btn layui-btn-sm layui-btn-danger dw-batch-delete" dw-url="./delete.json">--%>
                    <%--<i class="layui-icon">&#xe640;</i>删除--%>
                <%--</button>--%>
                <%--<button class="layui-btn layui-btn-sm dw-refresh">--%>
                    <%--<i class="layui-icon">&#x1002;</i>刷新--%>
                <%--</button>--%>
            </div>
            <%--<hr>--%>
            <table class="layui-table" id="demo" lay-filter="demo" lay-data="{id: 'demo'}">
            </table>
            <%--分页区域--%>
            <div id="pages" style="text-align: center">
                <div id="demopage"></div>
            </div>
        </div>

            <%--</fieldset>--%>
        <%--</div>--%>
    <%--</div>--%>

    <%--<div class="layui-footer">--%>
        <%--<!-- 底部固定区域 -->--%>
        <%--© layui.com - 底部固定区域--%>
    <%--</div>--%>
</div>
<script type="text/javascript" src="${pageContext.request.contextPath}/javascript/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.all.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/icheck/icheck.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/javascript/dw.js"></script>
<script type="text/html" id="statusTemp">
    {{#  if(d.userState==1 && d.roleId != 1){ }}
    <input type="checkbox"  id="{{d.userId}}" class="userState" style="width: 110px;" name="userState" lay-skin="switch" checked  lay-event="chgState" lay-text="开启|关闭"  value= "{{ d.userState}}"  lay-filter="userState" >
    {{#  } else if(d.userState==2 && d.roleId != 1){ }}
    <input type="checkbox" id="{{d.userId}}" class="userState" style="width: 110px;" name="userState" lay-skin="switch"  lay-event="chgState" lay-text="开启|关闭"  value= "{{ d.userState}}" lay-filter="userState" >
    {{#  } else if(d.userState==1 && d.roleId == 1){ }}
    <input type="checkbox" id="{{d.userId}}" class="userState" style="width: 110px;" name="userState" lay-skin="switch"  checked disabled lay-event="chgState" lay-text="开启|关闭"  value= "{{ d.userState}}" lay-filter="userState" >
    {{#  } else { }}
    <input type="checkbox" id="{{d.userId}}" class="userState" style="width: 110px;" name="userState" lay-skin="switch" disabled lay-event="chgState" lay-text="开启|关闭"  value= "{{ d.userState}}" lay-filter="userState" >
    {{#  } }}
</script>
<script type="text/html" id="operateTemp">
    <div class="layui-btn-container">
        <button  class="layui-btn layui-btn-sm layui-btn-normal dw-dailog"  dw-title="编辑用户" lay-event="edit">
        <i class="layui-icon">&#xe642;</i>编辑
    </button>
    <button class="layui-btn layui-btn-sm layui-btn-danger dw-delete" lay-event="del">
        <i class="layui-icon">&#xe640;</i>删除
    </button>
    </div>
</script>
<script>
    /*页面初始化查询数据*/
    $(function () {
        queryData();
    });

    var table = layui.table;
    var laypage = layui.laypage

    var option = {
        elem: '#demo' //指定原始表格元素选择器（推荐id选择器）
        ,height: 350 //容器高度
        // ,url: '/admin/finddemo' //数据接口
        // ,limit: 5 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
        // ,limits:[5,10,15,20]
        // ,page: true //开启分页
        ,cols: [[
            // {type: 'checkbox', fixed: true},//复选框
            {field: 'userId', align: "center",  width:60, title: 'ID', hide:true, sort: true},
            {field: 'userName', align: "center", width:125,title: '用户名'},
            {field: 'realName', align: "center", width:125,title: '真实姓名'},
            {field: 'userMobile', align: "center", width:130,title: '手机号'},
            {field: 'roleName', align: "center", width:125,title: '角色名称'},
            // {field: 'position', align: "center", title: '职位'},
            {field: 'channelId', align: "center", width:125, hide:true, title: '渠道id'},
            {field: 'channelName', align: "center", width:125,title: '渠道名称'},
            {field: 'userState', align: "center", width:125,title: '用户状态', event: "chgState" ,sort: true, templet: '#statusTemp'},
            {field: 'createName', align: "center",width:125, title: '创建人'},
            {field: 'createTime',  align: "center", width:130,title: '创建时间',sort: true},
            {toolbar: '#operateTemp', align: "center", title: '操作', fixed: 'right'}
        ]] //设置表头
        //,…… //更多参数参考右侧目录：基本参数选项
    };

    /*页面初始化查询数据*/
    function queryData() {
            $.ajax({
                url : '${pageContext.request.contextPath}/admin/findall',//数据接口
                type : 'GET',
                dataType : 'json',
                data: $('#queryForm').serialize(),
                success : function(data) {
                    if(data){//此data为后台返回数据
                        //完整功能
                        laypage.render({//分页配置相关
                            elem: 'demopage',//分页组件div的id或者指代div的dom节点对象
                            count: data.count,//记录总数
                            curr: data.currPage,//当前页码
                            limit: data.pageSize,//每页显示多少条 pageSize
                            limits:[3,5,10,15,20],
                            layout: [ 'count','prev', 'page', 'next', 'limit','skip']
                            ,jump: function(obj,first){
                                //obj指当前的分页对象,first代表第一次访问该页面
                                //任何有关换页的操作都会触发此函数，第一次访问的时候也会执行此函数
                                //加个跳转--附带两个参数
                                //alert("这是页面切换");
                                //使用jQuery赋值
                                $("#currPage").val(obj.curr);
                                $("#pageSize").val(obj.limit);
                                if(!first){
                                    //模拟提交条件查询的表单，附带当前页码和显示的条数
                                    queryData();
                                }
                            }
                        });
                        option.data = data.data;
                        table.render(option);
                    } else {
                        layer.msg("未获取到日志信息");
                    }
                }

            });
    }

    //条件查询按钮触发事件
    $("#queryBtn").click(function () {
        queryData();
    });

    // 工具监听
    table.on('tool(demo)', function (obj) {
        var data = obj.data; //获得当前行数据
        var userId = data.userId;//获取当前行用户id
        var userName = data.userName;//获取当前行用户名
        var channelId = data.channelId;//获取当前行渠道id
        var channelName = data.channelName;//获取当前行渠道名称
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
        <%--var admin = ${pageContext.request.contextPath}--%>
        var adminUserName = '${sessionScope.admin.userName}';//获取当前登录用户名
        var adminChannelId = '${sessionScope.admin.channelId}';//获取当前登录用户渠道id

        if(layEvent === 'edit'){ //编辑
            console.log("edit" + channelName);
            console.log(adminUserName + " - " + adminChannelId);
            if(adminChannelId == channelId && adminUserName == userName){//都相等则表示是同一人
                layer.msg("不允许编辑当前登录用户");
                return;
            }

            if(channelName == '全渠道'){
                layer.msg("全渠道管理员不允许修改");
                return;
            }
                layer.open({
                    type: 2,
                    title: "编辑用户",
                    shadeClose: true,
                    shade: 0.8,
                    area: ["900px", "400px"],
                    content: "${pageContext.request.contextPath}/admin/toUpdate?userId=" + userId,
                    cancel: function (index, layero) {
                        $(".dw-refresh").trigger('click');
                        // return false;
                    }, end:function(){
                        console.log("刷新主页面")
                        location.reload();//弹出层结束后，刷新主页面
                    }
                });
        } else if(layEvent === 'chgState'){//更改状态
            console.log(userId + layEvent);
            console.log("chgState" + channelName);
            //当前用户状态
            var userState = data.userState;
            console.log(userState)
            var stateId = $('#'+userId+'');//根据动态id获取当前操作对象
            if(adminChannelId == channelId && adminUserName == userName){//都相等则表示是同一人
                // console.log(ss.prop("checked"));//获取状态value值
                console.log(stateId.next().attr("class"));//当前操作对象的弟弟
                //给弟弟添加开关“开启”样式
                stateId.next().addClass("layui-unselect layui-form-switch layui-form-onswitch");
                //给弟弟的孩子<em></em>添加内容为开启
                stateId.next().children("em").html("开启");
                // $(this).trigger("click");
                layer.msg("当前登录用户不允许修改状态");//提示
                return;
            }

            if(channelName == '全渠道'){
                console.log( $(".userState").val());//获取状态value值
                console.log( $(".userState").prop("checked")); ////获取状态checked属性值（选中为true）
                // var stateFlag = $(".userState").prop("checked");
                layer.msg("全渠道管理员不允许修改状态");
                return;
            }

            $.ajax({
                url : '${pageContext.request.contextPath}/admin/chgstate',//数据接口
                type : 'GET',
                dataType : 'json',
                data: {"userId":userId,"userState":userState},
                success : function(data) {
                    if(data.code == 0){
                        queryData();
                        // table.reload('demo', option);
                    } else {
                        layer.msg("状态更改失败");
                    }
                }
            });

        }else if(layEvent === 'del') {//删除
            if(channelName == '全渠道'){
                layer.msg("全渠道管理员不允许删除");
                return;
            }
            //弹出框提示
            var delFlag = false;//是否删除
            layer.confirm("是否确定删除?", {
                btn: ["确定","取消"] //按钮
            }, function(index){
                layer.close(index);
                $.ajax({
                    url : '${pageContext.request.contextPath}/admin/del',//数据接口
                    type : 'GET',
                    dataType : 'json',
                    data: {"userId":userId},
                    success : function(data) {
                        if(data.code == 0){
                            queryData();
                            // table.reload('demo', option);
                        } else {
                            layer.msg("删除失败");
                        }
                    }
                });
            }, function(){

            });

        }
    });



    //执行渲染
    // table.render({
    //     elem: '#demo' //指定原始表格元素选择器（推荐id选择器）
    //     ,height: 450 //容器高度
    //     ,url: '/admin/finddemo' //数据接口
    //     ,limit: 10 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
    //     ,limits:[5,10,15,20]
    //     ,page: true //开启分页
    //     ,cols: [[
    //         {type: 'checkbox', fixed: true},
    //         {field: 'userId', align: "center", title: 'ID', fixed: true},
    //         {field: 'userName', align: "center", title: '用户名'},
    //         {field: 'realName', align: "center", title: '真实姓名'},
    //         {field: 'userMobile', align: "center", title: '手机号'},
    //         {field: 'roleName', align: "center", title: '角色名称'},
    //         {field: 'userState', align: "center", title: '用户状态', templet: '#statusTemp'},
    //         {field: 'createName', align: "center", title: '创建人'},
    //         {field: 'createTime',  align: "center", title: '创建时间'},
    //         {toolbar: '#operateTemp', align: "center", title: '操作', fixed: 'right'}
    //     ]] //设置表头
    //     //,…… //更多参数参考右侧目录：基本参数选项
    // });
    /*
     *然而这个接口要求后端的数据进行格式化的处理，然而这个会和分页功能产生冲突导致分页失效。
     * layui还提供了data参数去渲染数据，建议使用layui的表格组件时不用url，直接用data去渲染数据，
     * 就是先请求后台，返回数据再render。
     */


</script>
</body>
</html>
